<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
		 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
		 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<style>
		a{color:#E16900;text-decoration:none;}
		</style>
  		<style type="text/css">
        	body{background-image:URL(<c:url value="/images/starback.jpg" />)}
        	.ss1{font-size:150%;}
        	.ss2{font-size:130%;font-face:"新細明體"}
        	.ttb1{border:gray 3px solid;
					  font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif; 
					  background-color:#eaf5ff; 
					  width:800px;
					  hight:600px;
					 }
        </style>
        		<link rel="stylesheet" href="<c:url value="/index/main.css" />">
        			<link rel="stylesheet" href="<c:url value="/index/normalize.css" />">
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
        <script> $(document).ready(function(){ 
        	$(window).resize(function(){ 
        		$("#body").css('width', $(window).width()); });
        });
  		</script>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
        <script> $(document).ready(function(){ 
        	$(window).resize(function(){ 
        		$("#body").css('width', $(window).width()); });
        });
        </script>
        <script>
	       function showtext(blogcontent){    //data就=那整個object(input)！
	    	   $("#replytable2").empty();	
	    	   $('#show'+$(blogcontent).attr('id')).fadeIn();//ID show+那整個物件裡的"id"！然後整個包起來！再.方法！
	        		//$(blogcontent).hide();
	        		//alert($('#show'+$(blogcontent).attr('id')));
	        		var account="${user.account}";
	        		var url = "/i_plus/View/ShowReplyServlet.controller?"+
    				"id=" + $(blogcontent).attr('id')+"&account="+account+"&prodaction=reply";
	        		
	        		//var url1 = "/memberpageblog/pages/umember.controller";
	        		$.getJSON(url,function(data){
	        			console.log(data);
	        		
	        			$("#replycontent").html(data[0]);
	        			$("#replytime").html(data[1]);
	        			$(".hidbnum").attr("id",data[2]);
	        			for(var i=2;i<(data.length/2);i++){
							//var html = "<tr>"+
							var html ="<table class='ttb1'><tr><td class='ss1'><strong>"+ "留言帳號"+"</strong></td><td class='ss2'>"+
        								data[2*i-1] + "</td></tr>"+"<tr><td class='ss1'><strong>"+"留言內容"+
        								"</strong></td><td class='ss2'>" +
        								data[2*i ]	+ "</td></tr></table>";
        				//	var html ="<td >"+ 
							//data[2*i-1] + 
						//	"</td>" + 
						//	"<td>" +
						//	data[2*i ]	+ "</td>";
							
							$("#replytable2").append(html);
						}
	        			//$("#showreply").fancybox().trigger('click');
	        		});
	        }
	       
	  	  
        
        </script> 
        
        <script>
    	function insertblog(){
      		var blogcontent = $("#insertcontent").val();
      		var account = "${user.account}";
      		var data={
      				"content":blogcontent,
      				"account":account,
      				
      		};
      		$.ajax({
    			"url" : "/i_plus/View/BlogInsertServlet.controller",
    			"type" : "post",
    			"data" : data,
    			"dataType" : "text",
    			"success":function() {
    	    	      location.reload();
    		}
    			});
      	}
    	
        	function insertre(){
        		var id = $(".hidbnum").attr("id");
        		//var id = 68;
        		var data={
        				"content":$("#contentbox").attr("value"),
        				"id" : id,
        				"account" : '${user.account}'
        				};
        		$("#contentbox").val('');
        		$.ajax({
        			"url" : "BlogRelpyServlet.controller",
        			"type" : "post",
        			"data" : data,
        			"dataType" : "text",
        			"success" : function(response){
        				
        				$("#replytable2").empty();	
        		    	   $('#show'+id).fadeIn();//ID show+那整個物件裡的"id"！然後整個包起來！再.方法！
        		        		//$(blogcontent).hide();
        		        		//alert($('#show'+$(blogcontent).attr('id')));
        		        		
        		        		var url = "/i_plus/View/ShowReplyServlet.controller?"+
        	    				"id=" + id +"&account=${user.account}"+"&prodaction=reply";
        		        		
        		        		//var url1 = "/memberpageblog/pages/umember.controller";
        		        		$.getJSON(url,function(data){
        		        			console.log(data);
        		        		
        		        			$("#replycontent").html(data[0]);
        		        			$("#replytime").html(data[1]);
        		        			$("#hidbnum").val(data[2]);
        		        			for(var i=2;i<(data.length/2);i++){
        								//var html = "<tr>"+
        								var html ="<table class='ttb1'><tr><td class='ss1'><strong>"+ "留言帳號"+"</strong></td><td class='ss2'>"+
        								data[2*i-1] + "</td></tr>"+"<tr><td class='ss1'><strong>"+"留言內容"+
        								"</strong></td><td class='ss2'>" +
        								data[2*i ]	+ "</td></tr></table>";
        								
        								$("#replytable2").append(html);
        							}
        		        			
        		        		});
        			}
        		})
        	}
        </script>
        
        <link rel="stylesheet" href="<c:url value="/css/div-mar.css" />" />		
  <style>
  table {
  border:1px solid #0058a3; 
  font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif; 
  border-collapse:collapse; 
  border-spacing:1pt; 
  background-color:#eaf5ff; 
  font-size:13px;
  BORDER-TOP: #993333 3px dashed;
  BORDER-LEFT: #993333 3px dashed;
  BORDER-BOTTOM: #993333 3px dashed;
  BORDER-right: #993333 3px dashed;}
  tr:nth-child(even){
  background-color:#B0AFFF;
  BORDER-BOTTOM: #993333 2px dashed;
  }
  tr:nth-child(odd){
  background-color:#C991FF;
  BORDER-BOTTOM: #993333 2px dashed;
  }
  td{
  BORDER-right: #993333 3px dashed;
  }
  .c1:hover{
  	background:#FFCDE5;
  }
 .c1:hover h4{
  
  	color:black;}
  </style> 
  <script>
  //function replyblog(data){
	// ($(data).attr('id'));
	  //<c:url  value="ddd" var="path" >
      //<c:param name="account" value="${presend.account}" />              
      //<c:param name="name" value="${presend.name}" />
      //<c:param name="nickname" value="${presend.nickname}" />
      //<c:param name="bdate" value="${presend.bdate}" /> 
      //<c:param name="hight" value="${presend.hight}" />            
      //</c:url>
      
      //<a href="${path}"></a>
      //<a href="ddd?account="></a>
	  //連接到某servlet 給他這個id url給${path}
  //}
  $(document).ready(function(){
 $(".lovecontent").on("focus",function(){
	 console.log("now focus");
	 $(this).attr('rows','5');});
 });
  </script>
 	<!-- fancybox -->
		<script>
			$(window).load(function() {
				$(function(){
				    $('.fancybox').fancybox();
				});
			});
		</script>
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.mousewheel-3.0.6.pack.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/jquery.fancybox.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.fancybox.pack.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-buttons.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-buttons.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-thumbs.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-thumbs.js" />"></script>
		<!-- fancybox -->
  	<!--//name、class就是.！#就是抓id！-->       
</head>
<body>
    	<div  style="width:100%;height:150px;background-color: white;border-bottom: 1px solid gray">
         <div style="display:inline-block;margin-left: 180px;margin-top: 50px">
         <a href="<c:url value="/index.jsp" />"  >
         <img src="<c:url value="/index/imgs/images.jpg"/>" style="height:60px;left:50px" ><img src="<c:url value="/index/imgs/logo.png"/>" >
         </a>
         </div>
          	        <!-- menu 登入後 -->
          	        <c:if test="${not empty user}"> 
        <div style="right:70px;position: absolute; top: 0px;">
        	<img src="data:${userpic}" width="50px" height="50px">
        	<span>${user.account}</span>
        </div>
        <div style="right:0px;position: absolute; top: 0px;">
        	<span><a href="<c:url value="/LogoutServlet.controller"/>">登出</a></span>
        </div>
        </c:if>
         <c:if test="${not empty user}"> 
        <div style="float:left;margin-left:300px">
        	<span style="font-weight: bold;font-size: 130%;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/MypageServlet.controller?account=${user.account}" />">個人MYPAGE</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/ChatServlet.controller?fromacc=${user.account }" />">聊天CHAT</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/SendGiftServlet.controller" />">商城MARKET</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/MapServlet.controller" />">旅遊MAP</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/Match.jsp" />">配對MATCH</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/TarotServlet.controller?account=${user.account }" />">運勢Tarot</a></span>
        </div>
        </c:if>
        </div>
        
        <!--網頁主內容-->
        <div id="body" class="body" style="margin-top: 5px">

        	<!--body左側 會員&運勢-->
        	<div id="memberdiv" >
	        	<!--會員資料區塊-->
	        	<div id="m_profilediv" >
	        			<h3 class="st1" style="border: 2px solid silver;margin:5px 3px 0px 3px ">
	           				<!--這邊是會員個人資料區-->
	        
	           				<span style="font-size:26px">${ttry.nickname}</span>
	           				<span style="font-size:16px">&nbsp;&nbsp;${bg}</span>
	           				<span style="font-size:16px">&nbsp;${old}歲</span>
	           				</h3>
	           				<c:choose>  
	           					<c:when test="${user.account eq ttry.account}">
	           						<a href="<c:url value="/update.jsp"/>">
	           						<input type="button" name="pro" value="修改會員資料">
	           						</a>
	           					</c:when>
	           					<c:otherwise>
	           						<input type="button" name="pro" value="加好友">
	           					</c:otherwise>
	           				</c:choose>
	        		<div id="m_picdiv" ><img style="width:90% ;height:230px" src="data:${temppicture1}"/>
	        			<h3 class="st1" style="border: 2px solid silver;margin:100px 3px 0px 3px "></h3>
	        		</div>
        			<!--動態的會員資料-->
        			<div id="m_prof2div">
        				<h4 class="rp1" style="float: left;margin-left: 3px">${ttry.region}</h4>
        				<h4 class="rp1" style="float: left;margin-left: 3px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${starSign}</h4>
        				<h5 class="rp1" style="float: right;margin-top: 10px">${ttry.hight}公分</h5><br><br>
        				<h5 class="rp1" style="float :left;margin-left:3px; margin-top:0px">${blood}型</h5>
        				<h5 class="rp1" style="float :center;margin-left:3px;margin-top:0px">感情:${ttry.state}</h5>
        				<h5 class="rp1" style="float: left;margin-left:3px;margin-bottom:1px">喜歡：${hobby}</h5><br><br>
             		</div>
       			<!--人氣魅力值等等-->
        			
        		
        		</div>
        			<!--每日星座運勢-->
        			<div id="daily_fun" >
        				<h5 >請選擇您要查詢運勢的星座</h5>
        				<span >
        				<br/>
        					<span style="margin-left:20px">
        					
        					<a class="fancybox" href="#showbox1" data-fancybox-group="constellion" ><img id="Aries" src="<c:url value="/images/conimg/1.gif" />" width ="45px" height="45px" style="margin-right:2px" ></a>
        					<a class="fancybox" href="#showbox2" data-fancybox-group="constellion" ><img id="Taurus" src="<c:url value="/images/conimg/2.gif" />" width ="45px" height="45px" style="margin-left:3px"></a>
        					<a class="fancybox" href="#showbox3" data-fancybox-group="constellion" ><img id="Gemini" src="<c:url value="/images/conimg/3.gif" />" width ="45px" height="45px" style="margin-left:5px"></a>
        					<a class="fancybox" href="#showbox4" data-fancybox-group="constellion" ><img id="Cancer" src="<c:url value="/images/conimg/4.gif" />" width ="45px" height="45px" style="margin-left:5px"></a></br>
        					</span>
        					<br/>
        					<span style="margin-left:20px">
        					<a class="fancybox" href="#showbox5" data-fancybox-group="constellion" ><img id="Leo" src="<c:url value="/images/conimg/5.gif" />" width ="45px" height="45px" style="margin-right:2px" ></a>
        					<a class="fancybox" href="#showbox6" data-fancybox-group="constellion" ><img id="Virgo" src="<c:url value="/images/conimg/6.gif" />" width ="45px" height="45px" style="margin-left:3px"></a>
        					<a class="fancybox" href="#showbox7" data-fancybox-group="constellion" ><img id="Libra" src="<c:url value="/images/conimg/7.gif" />" width ="45px" height="45px" style="margin-left:5px"></a>
        				    <a class="fancybox" href="#showbox8" data-fancybox-group="constellion" ><img id="Scorpio" src="<c:url value="/images/conimg/8.gif" />" width ="45px" height="45px" style="margin-left:5px"></a></br>
        				    </span >
        				    <br/>
        				    <span style="margin-left:20px">
        					<a class="fancybox" href="#showbox9" data-fancybox-group="constellion" ><img id="Sagittarius" src="<c:url value="/images/conimg/9.gif" />" width ="45px" height="45px" style="margin-right:2px" ></a>
        					<a class="fancybox" href="#showbox10" data-fancybox-group="constellion" ><img id="Capricorn" src="<c:url value="/images/conimg/10.gif" />" width ="45px" height="45px" style="margin-left:3px"></a>
        					<a class="fancybox" href="#showbox11" data-fancybox-group="constellion" ><img id="Aquarius" src="<c:url value="/images/conimg/11.gif" />" width ="45px" height="45px" style="margin-left:5px"></a>
        					<a class="fancybox" href="#showbox12" data-fancybox-group="constellion" ><img id="Pisces" src="<c:url value="/images/conimg/12.gif" />" width ="45px" height="45px" style="margin-left:5px"></a>
        					</span>
        				</span>
        			</div>
        			
        	</div>
        			
        			<c:url var="path" scope="page" value='/manager/project/check.do'>
						<c:param name="blogcontet" value=""></c:param>
				   </c:url>
        			<!--動態網頁主內容-->
        			<div id="contentdiv" >
        			<h1>愛情隨筆</h1>
        			
        				<c:if test="${empty blog}">
        					<c:if test="${user.account eq ttry.account}">
        						<h3>你尚未發表任何文章</h3>
        						<textarea id="insertcontent" name="blogcontent" class="lovecontent" placeholder="寫下你的心情……"  cols="50" rows="1" style="resize:none"></textarea>
        						<input type="button" value="發表文章" onclick="insertblog();">
        					</c:if>
        					<c:if test="${user.account != ttry.account}">
        						<h3>尚未發表任何文章</h3>
        					</c:if>
        				</c:if>
        				       				
        				<c:if test="${not empty blog}">
        						<c:if test="${user.account eq ttry.account}">
        				     	<textarea id="insertcontent" name="blogcontent" class="lovecontent" placeholder="寫下你的心情……"  cols="50" rows="1" style="resize:none"></textarea>
        						<input type="button" value="發表文章" onclick="insertblog();">
        						
        						</c:if>
        				<script type="text/javascript">
	        				$(function(){
	        				    $('.fancyboxreply').fancybox();
	        				});
        				</script>
        				
        				<div style="display:none">
        					
        					<div id="showreply"  style="width:810px;height:480px">
        						<div id = "replytable2"  style="width:600px;height:400px">
        			<!--			<table id="replytable2" style="width:800px;hight:600px;border:blue 3px inset">
        		  					<tr>
        							<td>隨筆內容</td>
        							<td>發文時間</td>
        							</tr>
        							<tr >
        							
        								<td id="replycontent"></td>
        								<td id="replytime"></td>      								
        							</tr >
        							<tr >
        								<td>回文帳號</td>
        								<td>回覆內容</td>
        							</tr>
        							<tr id = "replytable2">

        							</tr>	
		
        						</table>
        						
        					
        						<table  style="width:200px;border:1px solid yellow;padding:3px"></table>
        						-->
        						
        						
        					</div>
        					<input type="text" placeholder="對他做回復" id="contentbox" />
        						<input type="button" name="replybutton" class ="hidbnum" id="" value="送出" onclick="insertre();"/>    
        				</div>
        				</div>
        				<table>
        					<!-- <thead>
        						<tr>
        							<th><h2>文章編號</h2></th>
        							<th><h2>文章內容</h2></th>
        							<th><h2>發文時間</h2></th>
        						</tr>
        					</thead> -->
        					<tbody>
        						<c:forEach var="blogbean" items="${blog}">
        							<tr class="c1">
        								<td style="width:200px"><img style="width:50px ;height:50px;position:relative;top:20px" src="data:${temppicture1}"/>
        								<c:choose>
        									<c:when test="${not empty hobby}">
        	    								<span style = "font-family: 細明體;color:#BE0200;" >${ttry.nickname}</span><br><br>
        	    							</c:when>
        	    							</c:choose>
        	    						</td>
        	    						
        	    						<c:choose>
        								<c:when test="${fn:length(blogbean.content)>20}">
        						
        								<td   style="width:550px ;font-size:130%;font-face:'細明體'"><h4>${fn:substring(blogbean.content,0,-1)}</h4>
        								
        							<!--
        								<span id="show${blogbean.b_num}" style="display:none;">${fn:substring(blogbean.content,20,-1)}</span>
									-->        							
        								<h6>${blogbean.b_time}</h6>
        								<!--  
        								<input type="button" id="${blogbean.b_num}" value="詳看全文" onclick="showtext(this);">
        								-->
        								<a class="fancyboxreply" href="#showreply"><input type="button" name="prodaction" id="${blogbean.b_num}" value="對他留言" onclick="showtext(this);"></a>
        								</td>
        								
        								</c:when>
        								
        								<c:otherwise>
        								 
        								<td style="width:550px ;font-size:130%;font-face:'細明體'"><h4>${blogbean.content}</h4><h6>${blogbean.b_time}</h6>
        								<a class="fancyboxreply" href="#showreply"><input type="button" name="prodaction" id="${blogbean.b_num}" value="對他留言" onclick="showtext(this);"></a>
        								</td>
        								
        								</c:otherwise>
        								</c:choose>
        								 
        							</tr>
        						</c:forEach>
        					</tbody>
        				</table>
        			</c:if>
        		</div>
        	</div>

        <!--最尾端 版權宣告與連絡資料等
        <div id="footer" >
        	<div style="width: 101%;height:150px;background-color: darkorange;float: left;margin-top: 50px;">
        		<table style="line-height:150%; height:175px; text-align:left;margin-left: 150px">
						<td>>
							<img src="<c:url value="/image/fblike.png" />" height="32" width="32">
							<img src="<c:url value="/image/twitlike.png" />" height="32" width="32">
							<img src="<c:url value="/image/googlelike.png" />" height="32" width="32">
						<br/>
							 <h5 class="st1" style="line-height: 0px;margin-bottom: 7px;margin-top: 5px">愛plus版權所有 &copy2014-2024 All rights Reserved</h5>
							  線上人數:XXXX   會員總數:XXXXXX 
							 
						</td>
						<td style="width:7.4%;position:relative;text-align: center">
							<img src="image/foot_line.png" height="110px">
						</td>
						<td style="width:20%;position: relative">
							<a href="test.html"><h6 class="st2">聯絡我們</h6></a><br/>
							<a href="test.html"><h6 class="st2">網路交友安全</h6></a><br/>
							<a href="test.html"><h6 class="st2">網站聲名與規範</h6></a><br/>
							<a href="test.html"><h6 class="st2">隱私權</h6></a><br/>
							<a href="test.html"><h6 class="st2" >問與答</h6></a><br/>
						</td>
						
							
				</table>
        	</div>-->
        </div>
    </body>
</html>